<!-- 此组件因不兼容微信小程序弹出功能，已被弃用，保留仅作参考使用 -->
<template>
  <u-popup 
    :show="show" 
    mode="bottom" 
    @close="handleClose"
    :closeable="false"
    :round="10"
    :duration="250"
  >
    <view class="popup__escort">
      <view class="escort__title f-30">选择陪诊师</view>
      <view class="escort-list">
        <scroll-view :scroll-y="true" :style="{height: scrollHeight}">
          <view 
            class="escort-item" 
            v-for="(item, index) in escortList" 
            :key="index"
            @click.stop="handleSelect(item)"
          >
            <view class="item-wrapper">
              <view class="escort-info">
                <view class="escort-avatar" @click.stop="handleViewDetail(item)">
                  <image mode="aspectFill" :src="item.avatar"></image>
                </view>
                <view class="escort-name">{{ item.name }}</view>
              </view>
              <view class="escort-service-content">
                <view class="content-title">
                  <text style="font-weight: bold;">提供服务</text>
                </view>
                <view class="content-value">{{ item.serviceContent }}</view>
              </view>
              <view class="escort-service-time">
                <view class="content-title">
                  <text style="font-weight: bold;">服务时段</text>
                </view>
                <view class="content-value">{{ item.serviceTime }}</view>
              </view>
              <view class="check-icon">
                <u-icon 
                  name="checkmark" 
                  :color="selectedId === item.id ? appTheme.mainBg : '#ddd'" 
                  size="40"
                ></u-icon>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'EscortPicker',
  props: {
    // 控制显示
    value: {
      type: Boolean,
      default: false
    },
    // 陪诊师列表
    escortList: {
      type: Array,
      default: () => []
    },
    // 已选择的陪诊师ID
    selectedId: {
      type: [Number, String],
      default: 0
    },
    // 滚动区域高度
    scrollHeight: {
      type: String,
      default: '70vh'
    }
  },
  data() {
    return {
      show: this.value
    }
  },
  watch: {
    value(newVal) {
	  console.log('[子组件] value变化:', newVal);
      this.show = newVal;
	  // 微信环境专用处理
	      const systemInfo = uni.getAppBaseInfo();
	      if (systemInfo.host?.env === 'WeChatDevTools') {
	        this.$nextTick(() => {
	          console.log('[微信专用] 触发强制更新');
	          this.$forceUpdate();
	        });
	      }
    }
  },
  computed: {
    isWechatDevTools() {
      return uni.getAppBaseInfo().host?.env === 'WeChatDevTools'
    }
  },
  created() {
    console.log('EscortPicker created, props:', this.$props); // 添加调试语句
  },
  methods: {
    // 选择陪诊师
    handleSelect(item) {
      console.log('handleSelect called, item:', item); // 添加调试语句
      this.$emit('select', item.id)
      this.handleClose()
    },
    
    // 查看详情
    handleViewDetail(item) {
      console.log('handleViewDetail called, item:', item); // 添加调试语句
      this.$emit('view-detail', item)
    },
    
    // 关闭弹窗
    handleClose() {
      console.log('[微信专用调试] 执行关闭操作')
      this.show = false;
      this.$emit('input', false);
      // 微信环境专用关闭保障
      if (this.isWechatDevTools) {
        this.$nextTick(() => {
            this.$forceUpdate()
            this.$children.forEach(child => child.$forceUpdate())
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popup__escort {
  padding: 30rpx;
  border-radius: 30rpx 30rpx 0 0;
}
.u-popup__wrapper {
  background-color: rgba(255,0,0,0.3) !important;
}
.escort__title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.escort-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  
  .item-wrapper {
    display: flex;
    align-items: center;
    position: relative;
  }
  
  .escort-info {
    width: 160rpx;
    text-align: center;
  }
  
  .escort-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .escort-name {
    font-size: 28rpx;
    color: #333;
  }
  
  .escort-service-content,
  .escort-service-time {
    flex: 1;
    padding: 0 30rpx;
    
    .content-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 15rpx;
    }
    
    .content-value {
      font-size: 26rpx;
      color: #999;
      line-height: 1.4;
    }
  }
  
  .check-icon {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>